<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {ElForm} from 'element-plus'
import {ElMessage} from "element-plus";
import {checkLogin} from "../../api/user";
import request from "../../utils/request";
import {shopInfo} from "../../api/shop";
import {useRouter} from "vue-router";

const router = useRouter()
const ruleFormRef = ref<InstanceType<typeof ElForm>>()

const validateName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (!/^[\u4E00-\u9FA5A-Za-z0-9_]+$/.test(value)) {
    callback(new Error('数字，字母，或中文'))
  } else {
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!/^[a-zA-Z0-9_-]{6,12}/.test(value)) {
    callback(new Error('数字，字母,必须以字母开头,长度为6到16'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  account: '',
  password: '',
})

const rules = reactive({
  account: [{validator: validateName, trigger: 'blur'}],
  password: [{validator: validatePass, trigger: 'blur'}],
})
console.log('111', {request})

function submitForm(formEl: InstanceType<typeof ElForm> | undefined) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      formEl.validate(async (valid) => {
        if (valid) {
          let res = await checkLogin({...ruleForm})
          let {code, msg, token, rode} = res.data
          //如果code==0时，代表登录成功
          if (code == 0) {
            //登录成功后,将token存储到本地
            sessionStorage.setItem('t_k', token)
            // 跳转到首页
            await router.push('/')
          }
        } else {
          ElMessage.error('验证失败了')
          return false
        }
      })
    } else {
      console.log('验证失败了')
      return false
    }
  })
}

async function getData() {
  let data = await shopInfo()
  console.log(data)
}

function getList() {
  request.get('users/info').then(data => {
    console.log('info', data)
  }).catch(err => console.log('err', err))
}

getData()
getList()
</script>
<template>
  <div id="login">
    <div class="login-main">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
      >
        <p class="title">系统登录</p>
        <el-form-item prop="account">
          <el-input v-model="ruleForm.account" autocomplete="off" prefix-icon="Avatar" type="text">
            <i class="iconfont icon-yonghu"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" autocomplete="off" prefix-icon="Lock" show-password type="password">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm(ruleFormRef)"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-main {
    text-align: center;
    width: 400px;

    .submit {
      width: 100%;
    }

    .title {
      line-height: 60px;
      font-weight: 600;
      color: white;
    }

    :deep(.el-input__inner) {
      background: #2d3a4b;
      color: white;
    }
  }
}
</style>
